<template>
  <div>
    <div class="allcatin_top">
        <div>
             <el-button type="success" @click="addtable">添加表格</el-button>
            <el-button type="success" @click="savetable">保存数据</el-button>
        </div>
    </div>

    <div class="allcatin_hader">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @cell-dblclick="edit"
        :header-cell-style="thStyleFun"
        :cell-style="cellStyleFun"
      >
        <el-table-column label="ID" prop="ID">
          <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-select 
                v-if="scope.row.isEdit"
                v-model="scope.row.ID"
                size="mini"
                @change="changselect(scope.row.userId, scope.row.ID)"
              >
                   <el-option 
                   v-for="(key,item) in manlist" 
                   :label="key.ID"
                   :value="key.ID" 
                   :key="item"></el-option>
              </el-select >
              <span v-else>{{ scope.row.ID }}</span>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column  label="CODE" prop="CODE">
           <template slot-scope="scope">
            <el-form :model="scope.row">
              <el-select 
                v-if="scope.row.isEdit"
                v-model="scope.row.CODE"
                size="mini"
              >
                   <el-option 
                   v-for="(item,index) in alarmlist" 
                   :label="item"
                   :value="item" 
                   :key="index"></el-option>
              </el-select >
              <span v-else>{{ scope.row.CODE }}</span>
            </el-form>
          </template>
        </el-table-column>


        <el-table-column   label="NAME" >
                <template slot-scope="scope">
                    <el-form :model="scope.row">
                          <el-input
                            v-if="scope.row.isEdit"
                            :disabled="true"
                            v-model="scope.row.NAME"
                            size="mini"
                          ></el-input>
                          <span  v-else>{{ scope.row.NAME }}</span>
                    </el-form>
               </template>
        </el-table-column>

                   
        <el-table-column label="MAIL" >
              <!-- <span >{{ this.MAIL }}</span> -->
               <template slot-scope="scope">
                    <el-form :model="scope.row">
                          <el-input
                            v-if="scope.row.isEdit"
                            :disabled="true"
                            v-model="scope.row.MAIL"
                            size="mini"
                          ></el-input>
                          <span  v-else>{{ scope.row.MAIL }}</span>
                    </el-form>
               </template>
        </el-table-column>



        <el-table-column  label="PHONE">
              <template slot-scope="scope">
                    <el-form :model="scope.row">
                          <el-input
                            v-if="scope.row.isEdit"
                            :disabled="true"
                            v-model="scope.row.PHONE"
                            size="mini"
                          ></el-input>
                          <span  v-else>{{ scope.row.PHONE }}</span>
                    </el-form>
               </template>
        </el-table-column> 

        <el-table-column label="SEND_MERGE">
            <template slot-scope="scope">
                <el-form :model="scope.row">
                    <el-select 
                    v-if="scope.row.isEdit"
                    v-model="scope.row.SEND_MERGE"
                    size="mini"
                    >
                      <el-option label = "OFF" value="OFF"></el-option>
                      <el-option label = "ON" value="ON"></el-option>
                  </el-select >
                  <span v-else>{{ scope.row.SEND_MERGE }}</span>
                </el-form>
             </template>
        </el-table-column>

        
        <el-table-column label="SEND_TIME(选填)">
                <template slot-scope="scope">
                       <el-form :model="scope.row">
                              <el-time-picker
                               size="mini"
                                v-if="scope.row.isEdit"
                               type="datetime"
                               value-format="HH:mm:ss"
                                v-model="scope.row.SEND_TIME"
                                start="00:00"
                                end="24:00"
                                :default-time="['00:00:00','23:59:59']"
                                placeholder="任意时间点">
                              </el-time-picker>
                              <span v-else>{{ scope.row.SEND_TIME }}</span>
                       </el-form>
                </template>
        </el-table-column>


          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
               :loading="scope.row.isLoading"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//  import qs from 'qs'
export default {
  data() {
    return {
      value1:'',
      tablelist: [],
      tableData: [],
      disabled:false,
      value: false,
      manlist:[],
      sublist:[],
      alarmlist:[],
      CODE:"",
      NAME:'',
      MAIL:"",
      PHONE:""
    };
  },
  mounted() {
    this.gettablelist();
  },
  methods: {
    
    changeSwitch () {
      // console.log(data);
    },

   changselect(){
     this.manlist.forEach((ele)=>{
        this.tableData.forEach((item)=>{
           if(ele.ID === item.ID){
              item.NAME = ele.NAME;
              item.MAIL = ele.MAIL;
              item.PHONE = ele.PHONE;
           }
        })
      })
   },

 

    gettablelist() {
      this.manlist=[];
      this.alarmlist=[];
        this.ajax.get("func/1023/selAlarmSub").then((res) => {
          res.data.man.forEach((ele) => {
            this.manlist.push(ele)
          });
          res.data.alarm.forEach((ele)=>{
            this.alarmlist.push(ele.CODE)
          })
          res.data.sub.forEach((ele)=>{
            this.$set(ele, "isEdit", false);
            this.$set(ele, "isAbnormal", false);
             this.manlist.forEach((item)=>{
               if(ele.ID == item.ID){
                  ele.NAME = item.NAME;
                  ele.MAIL = item.MAIL;
                  ele.PHONE = item.PHONE
               }
             })
          })
          
           this.tableData = res.data.sub; 
           this.sublist = res.data.sub;
        });
    },

    thStyleFun() {
      return "text-align: center;background:#696969;color:#fff;text-align:center";
    },
    cellStyleFun() {
      return "text-align:center";
    },

    edit(row) {
      if (row.isEdit) return;
      row.isEdit = !row.isEdit;
    },

    addtable() {
      if(this.tableData.length){
        var obj = {
          ID: '',
          isAbnormal: false,
          isEdit: false,
          MAIL: '',
          NAME:'',
          PHONE: '',
          option:'',
          CODE:''
        };
        this.tableData.unshift(obj);
      }else{
        this.tableData.push({
          ID:3001,
          isAbnormal:false,
          isEdit:false,
          MAIL: '',
          NAME: '',
          PHONE: '',
          SEND_MERGE:'',
          CODE:1001,
          SEND_TIME:''
        })
      }
    },
       
     
    savetable() {
       
      //  console.log(this.tableData)
        let ary = [];
        this.tableData.forEach((item) => {
        var obj = {
            ID: item.ID,
            isAbnormal:item.isAbnormal,
            isEdit: item.isEdit,
            MAIL: item.MAIL,
            NAME: item.NAME,
            PHONE:item.PHONE,
            SEND_MERGE:item.SEND_MERGE,
            SEND_TIME:item.SEND_TIME,
            CODE:item.CODE
          };
          ary.push(obj);
        });
      for (let i = 0; i < ary.length - 1; i++) {
        if (!ary[i].ID == ary[i + 1].ID&&ary[i].CODE == ary[i + 1].CODE) {
          //  console.log('相同') 
          this.$alert(ary[i].ID&&ary[i].CODE, "相同人员id不能选择相同code", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$message({
                type: "info",
                message: `action: ${action}`,
              });
            },
          });
        }
        else if(ary[i].ID == ""){
             this.$alert("id不能为空", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
            return
        }else if(ary[i].CODE == ""){
              this.$alert("CODE不能为空", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
              return
          }else if(ary[i].SEND_MERGE == ''){
               this.$alert("SEND_MERGE不能为空", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
              return
          }else{
              this.ajax({
                    method: "POST",
                    url: "func/1023/updateAlarmSub?",
                    data: ary,
                  }).then((res) => {
                    if (res.data.code == 2000) {
                      this.$message({
                        message: "保存成功",
                        type: "success",
                      });
                      this.gettablelist();
                    }else if(res.data.code == 8001){
                        // console.log(res)
                      this.$alert(res.data.text, {
                        confirmButtonText: "确定",
                        callback: (action) => {
                          this.$message({
                            type: "info",
                            message: `action: ${action}`,
                          });
                        },
                      });
                    }
                  });
                  return
          }
      } 
    
          
         

    },

    blur(item, id) {
      // console.log("blur事件被执行了",item,id)
      if (id == "") {
        this.$alert("id不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    onblur(item, id) {
      if (id == "") {
        this.$alert("姓名不能为空", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      }
    },

    blurmall(item, id) {
      var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      //  console.log(reg)
      if (!reg.test(id)) {
        this.$message({
          message: "请正确输入邮箱",
          type: "error",
        });
      }
    },

    blurphone(item, id) {
      console.log(id);
      var reg = /^1[3456789]\d{9}$/;
      if (!reg.test(id)) {
        this.$message({
          message: "请正确输入手机号码",
          type: "error",
        });
      }
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index,row) {
       row.isLoading = true;
       this.$confirm('此操作将进行删除操作, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
               this.tableData.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                setTimeout(function () {
                    row.isLoading = false;
                }, 1500)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                row.isLoading = false;
            });
      // console.log(index, row);
      // console.log(this.tableData.length)
    },
  },
};
</script>

<style  scoped>
.allcation_cont {
  width: 100%;
}
.allcatin_top {
  width: 100%;
  /* border:1px solid #000; */
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-top: 5px;
  /* padding-right:-10px; */
}
.allcatin_hader {
  margin-top: 30px;
}
</style>